<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

$(document).ready(function(){
	$("#btnSubmit").click(function(){
		var idx = "${map.idx}";
		var userid = "${sessionScope.userid}";
		var comment = $("#comment").val();
		var star_choice_score = $("#star_choice_score").val();
		if(star_choice_score == ""){
			alert("평점을 선택해 주세요!")
		}else{
			var param = "idx="+idx+"&userid="+userid+"&comment="+comment+"&star_choice_score="+star_choice_score;

			$.ajax({
				type:"post",
				url : "${path}/recipe/recipe_cmtInsert.do",
				data: param,
				success: function(msg){
					$("#result").html(msg);
				}
			});
			
			$("#comment").val("");	//입력 후 초기화
		}
	});
});
	
function cmtDelete() {
	var idx = "${map.idx}";
	var btnCmtIdx = $("#btnCmtIdx").val();
	var param = "idx="+idx+"&btnCmtIdx="+btnCmtIdx;
	$.ajax({
		type:"post",
		url : "${path}/recipe/recipe_cmtDelete.do",
		data: param,
		success: function(msg){
			$("#result").html(msg);
		}
	});
}
	
	/* [시작] 평점 별 계산 */
	
function star_change( action, num ){
 	if( action == "over" ){
	  	for( var i=1; i<num; i++ ){
		$("#star_"+i).attr("src","${path}/images/icons/star1.png");
	  	}
		$("#star_score").html(num-1); //평점 점수를 보여줌
 	}
 	if( action == "out" ){
		for( var i=1; i<num; i++ ){
		$("#star_"+i).attr("src","${path}/images/icons/star2.png");
		}
		$("#star_score").html("0"); //마우스가 벗어나면 평점 0으로
 	}
}

function star_click(num){
	var i=6;

	for(i; i>1; i-- ){
		$("#star_"+i).attr("src","${path}/images/icons/star2.png");
		$("#star_"+i).attr("onmouseover","");
		$("#star_"+i).attr("onmouseout","");
	}

	for( i=1; i<num; i++ ){
		$("#star_"+i).attr("src","${path}/images/icons/star1.png");
		$("#star_"+i).attr("onmouseover","");
		$("#star_"+i).attr("onmouseout","");
 	}
 	$("#star_score").html(num-1); //평점 점수를 보여줌
 	$("#star_choice_score").val(num-1); //평점 점수를 여기에 저장
}

	/* [끝] 평점 별 계산  */
	
	function moveHome() {
		location.href="${path}/index.jsp";
	}
	
	function moveWrite() {
		if(${sessionScope.userid == null} ){
			location.href="${path}/member/login.jsp";
		}else{
			location.href="${path}/recipe/recipe_write.do";
		}
	}
	
	function btnEditView() {
		location.href = "${path}/recipe/recipe_edit_view.do?idx="+${map.idx};
	}
	
	function btnDelete() {
		if(confirm("삭제하시겠습니까? [Y/N]")){
			location.href = "${path}/recipe/recipe_delete.do?idx="+${map.idx};
		}
	}
	
	function add_my_recipe(idx){
		if(confirm(idx+"번 레시피를 스크랩 하시겠습니까?")){
			var param = "idx="+idx;
			$.ajax({
				type:"post",
				url:"${path}/member/add_favor_recipe.do",
				data:param,
				success:function(msg){
					alert(msg);	
				}				
			});
		}
	}
</script>
</head>
<body>
<hr style="height: 5px; background-color: orange;">
<span style="font: 30px bold; margin-left: 30px;">§ Recipe_Detail §</span>
<div style="background-color: orange; display: inline-block; float: right; vertical-align: middle; margin-left: 20px; padding-left: 10px; padding-right: 10px;">
<input type="image" id="btnHome" src="${path}/images/icons/btnHome.png" width="50px" height="50px" onclick="moveHome();">
<input type="image" id="btnWrite" src="${path}/images/icons/btnWrite.png" width="50px" height="50px" onclick="moveWrite();">
</div>
<hr style="height: 5px; background-color: orange;">
	<c:if test="${sessionScope.userid != null}">
	<div style="margin-top: 20px; margin-bottom: 20px; margin-left: 50px; font-family: fantasy; font: 30px bold; color: orange;">
		Connected to : ${sessionScope.userid }<br><br>
	</div>
	</c:if>
	
	<div style="margin-bottom: 20px; margin-left: 50px;">
		<span style="font-weight: bold; font-size: 15px;">WRITER : ${map.recipe_list.userid}</span>
		<c:if test="${sessionScope.userid != null and sessionScope.userid != map.recipe_list.userid}">
			<input type="button" id="btnAddFriend" value="친구추가" style="margin-left: 20px;">
			<input type="button"  value="레시피 스크랩" onclick="add_my_recipe('${map.idx}')" style="margin-left: 20px;">
		</c:if>
	</div>
	<div style="margin-top: 20px; margin-bottom: 20px; margin-left: 50px;">
		<b>SUBJECT</b><br><br>
		<input type="text" value="${map.recipe_list.subject }" disabled="disabled" style="width: 600px; margin-left: 10px;">
	</div>
	<div style="margin-bottom: 20px; margin-left: 50px;">
		<b>HISTORY</b><br><br>
		<textarea disabled="disabled" rows="3" cols="72" style="margin-left: 10px;">${map.recipe_list.history }</textarea>
	</div>
	<div style="margin-bottom: 20px; margin-left: 50px;">
		<b>FINAL_IMAGE</b>
		<div style="margin-top: 20px;">
			<img src="${path}/images/recipe/${map.idx}/${map.recipe_list.image}" width="350px" height="350px">
		</div>
	</div>
	<table border="5" width="650px" style="margin-bottom: 20px; margin-left: 50px; text-align: center;">
		<tr>
			<td style="">SELECTED - TYPE 
			<td>SELECTTED - INGREDIENT
			<td>SELECTTED - TIME
		<tr>
			<td>
				<!-- type -->
				${map.recipe_list.type }
			<td>
				<!-- ingredient -->
				${map.recipe_list.ingredient }
			<td>
				<!-- time -->
				${map.recipe_list.time } (minute)
	</table>
	<div style="margin-bottom: 20px; margin-left: 50px;">
		<b>INGREDIENTS</b><br><br>
		<textarea disabled="disabled" rows="6" cols="72" style="margin-left: 10px;">${map.recipe_list.ingredients }</textarea>
	</div>
	<div style="margin-bottom: 20px; margin-left: 50px;">
		<b>COOKER</b><br><br>
		<textarea disabled="disabled" rows="6" cols="72" style="margin-left: 10px;">${map.recipe_list.cooker }</textarea>
	</div>
	
	<!-- /////////////////////////////////////////////////////////////////////////////////// -->
	
	<c:forEach var="row" items="${map.step_list}">
		<div style="height:35px; line-height:35px; padding-left: 10px; background-color: #ffbf8f;">
			<b>STEP ${row.step }</b> &nbsp;&nbsp;<c:if test="${row.important == '1'}"><span style="color: red; font-family: fantasy; font: 20px italic;" ><b>※ IMPORTANT!</b></span></c:if>
		</div>
		<div <c:if test="${row.important == '1'}">style="background-color: #ffe1d4;"</c:if><c:if test="${row.important != '1'}">style="background-color: #a9a9a9;"</c:if>>
			<div style="margin-bottom: 20px; margin-left: 60px;">
				<img src="${path}/images/step/${map.idx}/${row.image1}" width="200px" height="200px" style="margin-top:20px;">
			</div>
			<div style="margin-left: 50px;">
				<b>CONTENT</b><br><br>
				<textarea disabled="disabled" rows="6" cols="72" style="margin-left: 10px; margin-bottom: 20px;">${row.content}</textarea>
			</div>
		</div>
	</c:forEach>
	<br><br>
	<c:if test="${sessionScope.userid != null and sessionScope.userid == map.recipe_list.userid}">	
		<div style="text-align: center;">
			<input type="button" id="btnEdit" name="btnEdit" value="EDIT" onclick="btnEditView();">
			<input type="button" id="btnDelete" name="btnDelete" value="DELETE" onclick="btnDelete();">
		</div>
		<br><br>
	</c:if>
	<div style="margin-left:250px; height: 150px; width: 500px; background-color: black; margin-bottom: 50px;" align="center">
	<!-- //////////////////////////////////////////// -->
		<span style="position:relative;">
     	<img src="${path}/images/icons/star2.png" title="1점" alt="1점" id="star_1" onmouseover='star_change("over",2);' onmouseout='star_change("out",2);' style="cursor:pointer;" onclick='star_click(2);' width="50px" height="50px"/>
     	<img src="${path}/images/icons/star2.png" title="2점" alt="2점" id="star_2" onmouseover='star_change("over",3);' onmouseout='star_change("out",3);' style="cursor:pointer;" onclick='star_click(3);' width="50px" height="50px"/>
    	<img src="${path}/images/icons/star2.png" title="3점" alt="3점" id="star_3" onmouseover='star_change("over",4);' onmouseout='star_change("out",4);' style="cursor:pointer;" onclick='star_click(4);' width="50px" height="50px"/>
     	<img src="${path}/images/icons/star2.png" title="4점" alt="4점" id="star_4" onmouseover='star_change("over",5);' onmouseout='star_change("out",5);' style="cursor:pointer;" onclick='star_click(5);' width="50px" height="50px"/>
     	<img src="${path}/images/icons/star2.png" title="5점" alt="5점" id="star_5" onmouseover='star_change("over",6);' onmouseout='star_change("out",6);' style="cursor:pointer;" onclick='star_click(6);' width="50px" height="50px"/>
    	</span>
    	<span style="position:relative; top:1px; left:80px; font-size:13px; color: white;">
     	<b>(&nbsp;<span style="font-size:20px; color:#E62020; font-family:Tahoma;" id="star_score">0</span>&nbsp;점)</b>
    	</span>
    	<input type="hidden" id="star_choice_score" name="star_choice_score" />
	<!-- //////////////////////////////////////////// -->
		<c:choose>	
		<c:when test="${sessionScope.userid == null }">
			<textarea id="comment" name="comment" style="height: 100px; width: 500px; line-height: 45px; text-align: center;" disabled="disabled">덧글 입력은 로그인이 필요합니다.
			</textarea>
		</c:when>
		<c:when test="${sessionScope.userid != null }">
			<textarea id="comment" name="comment" style="height: 100px; width: 500px;"></textarea>
			<input type="button" id="btnSubmit" value="등록" style="float: right;">
		</c:when>
		</c:choose>
		<br>
	</div>
	<div id="result" style="margin-left:20px;">
		<table align="center" border="3" width="800px">
		<c:if test="${map.cmt_list.size() != 0}">
		<tr>
			<td style="height: 30px; line-height: 30px; text-align: center; background-color: orange; font-family: Tahoma;">
				<b><font color="red">${map.cmt_list.size()}</font>&nbsp;개의 댓글이 있습니다.</b>
		<c:forEach var="row" items="${map.cmt_list}">
		<tr>
			<td style="font-family: Tahoma; font-weight: bolder; background-color: menu;">
				<img src="${path}/images/lv/${row.level}.gif" style="margin-left: 10px;"> 
				<span style="margin-left: 10px;">USER ID : ${row.userid}</span> 
				<span style="margin-left: 10px;">${row.post_date}</span>
				<c:if test="${sessionScope.userid == row.userid }">
				<span style="float: right; margin-right: 10px;">
					<input type="button" id="btnCmtDel" name="btnCmtDel" value="삭제" onclick="cmtDelete()">
					<input type="hidden" id="btnCmtIdx" value="${row.idx }">
				</span>
				</c:if>
		<tr>
			<td style="padding: 5px;">
				<span style="background-color: black;">
				<c:choose>
					<c:when test="${row.rate == 1}">
					<img src="${path}/images/icons/star1.png" width="15px" height="15">
					<img src="${path}/images/icons/star2.png" width="15px" height="15">
					<img src="${path}/images/icons/star2.png" width="15px" height="15">
					<img src="${path}/images/icons/star2.png" width="15px" height="15">
					<img src="${path}/images/icons/star2.png" width="15px" height="15">
					</c:when>
					<c:when test="${row.rate == 2}">
					<img src="${path}/images/icons/star1.png" width="15px" height="15">
					<img src="${path}/images/icons/star1.png" width="15px" height="15">
					<img src="${path}/images/icons/star2.png" width="15px" height="15">
					<img src="${path}/images/icons/star2.png" width="15px" height="15">
					<img src="${path}/images/icons/star2.png" width="15px" height="15">
					</c:when>
					<c:when test="${row.rate == 3}">
					<img src="${path}/images/icons/star1.png" width="15px" height="15">
					<img src="${path}/images/icons/star1.png" width="15px" height="15">
					<img src="${path}/images/icons/star1.png" width="15px" height="15">
					<img src="${path}/images/icons/star2.png" width="15px" height="15">
					<img src="${path}/images/icons/star2.png" width="15px" height="15">
					</c:when>
					<c:when test="${row.rate == 4}">
					<img src="${path}/images/icons/star1.png" width="15px" height="15">
					<img src="${path}/images/icons/star1.png" width="15px" height="15">
					<img src="${path}/images/icons/star1.png" width="15px" height="15">
					<img src="${path}/images/icons/star1.png" width="15px" height="15">
					<img src="${path}/images/icons/star2.png" width="15px" height="15">
					</c:when>
					<c:when test="${row.rate == 5}">
					<img src="${path}/images/icons/star1.png" width="15px" height="15">
					<img src="${path}/images/icons/star1.png" width="15px" height="15">
					<img src="${path}/images/icons/star1.png" width="15px" height="15">
					<img src="${path}/images/icons/star1.png" width="15px" height="15">
					<img src="${path}/images/icons/star1.png" width="15px" height="15">
					</c:when>
					<c:otherwise>
					<img src="${path}/images/icons/star2.png" width="15px" height="15">
					<img src="${path}/images/icons/star2.png" width="15px" height="15">
					<img src="${path}/images/icons/star2.png" width="15px" height="15">
					<img src="${path}/images/icons/star2.png" width="15px" height="15">
					<img src="${path}/images/icons/star2.png" width="15px" height="15">
					</c:otherwise>
				</c:choose>
				</span>
				<span style="margin-left: 30px;">${row.comment}</span>
		</c:forEach>
		</c:if>
		<c:if test="${map.cmt_list.size() == 0}">
		<tr>
			<td style="height: 100px; line-height: 100px; text-align: center;"><b>게시물에 등록된 덧글이 없습니다.</b>
		</c:if>
		</table>
	</div>
	<br><br>
</body>
</html>